<template>
	<view class="page container">
		<view class="h-28">
			
		</view>
		<view v-for="(i,n) in dtList" :key="i.id" class="dtdata bgc-fff" @click="$utils.to(`/pages/information/information_detail?id=${i.id}`);">
			<view class="" style="flex:1">
				<view class="clamp2">
					{{i.title}}
				</view>
				<!-- <view class="watch">
					<image class="eye" src="/static/newVer/eye.png" mode="aspectFit"></image>
					浏览{{i.see_num}}次
				</view> -->
			</view>
			<image src="/static/news.png" mode=""></image>
		</view>
	
	</view>
</template>

<script>
	import {
		getAssList
	} from "@/services/home.js";

	export default {
		data() {
			return {
			
				dtList: [],
				page:1,
				count:0
			};
		},
		components: {

		},
		onReachBottom() {
			if(this.dtList.length<this.count){
				this.page++
				this.getNewsList()
			}
			
		},
		onLoad() {
			this.getNewsList()
		
			
		},
		onPageScroll: function(data) {

			this.fixed = data.scrollTop > 50 ? true : false
		},
		mounted() {
			// this.startScroll()
		},
		beforeDestroy() {
			// this.stopScroll()
		},
		methods: {
			
			getNewsList() {
				getAssList({page:this.page}).then(res=>{
					console.log(res)
						this.dtList =[...this.dtList,...res.data];
						this.count=res.count
				})
			},
			
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #EFEFEF;
		padding: 0 28rpx;
		padding-bottom: 60rpx;

		.notice {
			/deep/.u-notice-bar {
				padding-left: 0;
				padding-right: 6rpx;
			}

			padding: 6rpx 24rpx;
			display: flex;
			align-items: center;

			.line {
				background-color: #9ca4ab;
				opacity: 0.3;
			}

			.text {
				color: #35374b;
				//最多一行，省略号
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		/deep/.u-tabs__wrapper__nav__item__text {
			font-size: 36rpx;
		}

		.btns2 {
			&>view {
				box-sizing: border-box;
				padding: 0 24rpx;

				.right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
				}
			}
		}

		.swiper {
			height: 240rpx;
		}

		.banner-box {
			height: 240rpx;
			// margin: 32rpx 0;
			position: relative;

			&>text {
				position: absolute;
				top: 24rpx;
				left: 24rpx;
				color: #fff;
				font-size: 28rpx;
				font-weight: 500;
				letter-spacing: 2rpx;
			}

			&>image {
				width: 100%;
				height: 240rpx;
				border-radius: 12rpx;
			}
		}
	}

	.select-box {
		/deep/.uni-select {
			border: none;
		}

		/deep/.uni-select__selector {
			width: 150rpx;
		}
	}

	.search-container {
		flex: 1;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 0 16rpx;
		position: relative;

		/deep/.uni-stat-box {
			background: transparent;
			border: none;
		}

		/deep/.uni-select {
			border: none;
			background: transparent;
			padding-left: 8rpx;
		}

		/deep/.uni-select__selector {
			width: 150rpx;
		}

		/deep/.u-search {
			flex: 1;
			background: transparent;
		}
	}

	.container {
		position: relative;

		.hdbg {
			position: absolute;
			width: 100%;
			left: 0;

			image {
				width: 100%;
				height: 500rpx;
			}
		}
	}

	.suggest {
		width: 702rpx;
		height: 482rpx;
		background: linear-gradient(180deg, #FDDCBA 0%, #EFB47A 99%);
		border-radius: 12rpx;
		padding: 22rpx;
		box-sizing: border-box;
	}

	.suggest-title {
		font-weight: 400;
		font-size: 24rpx;
		color: #AD6D33;

		text {
			font-weight: 500;
			font-size: 36rpx;
			color: #6F3204;
		}
	}

	.suggest-item {
		width: 270rpx;
		height: 360rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-right: 22rpx;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #3D3D3D;
		margin-top: 20rpx;

		// padding-left: 14rpx;
		// padding:22rpx;
		// box-sizing: border-box;
		image {
			width: 240rpx;
			height: 240rpx;
		}

		.pricebox {
			text-align: left;
			margin-left: 16rpx;
			width: 100%;

			text {
				font-weight: 700;
				font-size: 32rpx;
				color: #F83D3D;
			}
		}
	}

	.online-title {
		font-weight: 500;
		font-size: 36rpx;
		color: #FF3000;
		margin: 20rpx 0 28rpx;
		line-height: 52rpx;
	}

	.onlineHeader {
		// width: 702rpx;
		height: 74rpx;
		background: #FCEAE1;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 46rpx;
		display: flex;
		align-items: center;
		padding: 0 16rpx;
		margin-bottom: 28rpx;
	}

	.onlineList {
		height: 74rpx;
		display: flex;
		align-items: center;
		padding: 0 16rpx;
		transform: translateZ(0);
		font-size: 28rpx;
		color: #3D3D3D;

		view {
			display: flex;
			align-items: center;

		}

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.newsdata {
		font-size: 28rpx;
		color: #999999;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		margin-top: 32rpx;

		.dongtai-title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FF3000;
			line-height: 52rpx;
			position: relative;
			display: inline-block;

		}

		.dongtai-title::after {

			position: absolute;
			clear: both;
			content: '';
			position: absolute;
			left: 0;
			bottom: -10rpx;
			right: 0;
			margin: auto;
			width: 120rpx;
			height: 10rpx;
			background: linear-gradient(270deg, #FF8000 0%, #FF2D32 100%), #FF3000;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}
	}

	.newstab {
		margin: 40rpx 0 32rpx;
		padding: 0 22rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #666666;
		line-height: 52rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.dongtai-title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FF3000;
			line-height: 52rpx;
			position: relative;
			display: inline-block;

		}

		.dongtai-title::after {

			position: absolute;
			clear: both;
			content: '';
			position: absolute;
			left: 0;
			bottom: -10rpx;
			right: 0;
			margin: auto;
			width: 120rpx;
			height: 10rpx;
			background: linear-gradient(270deg, #FF8000 0%, #FF2D32 100%), #FF3000;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}
	}

	.dtdata {
		height: 208rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		width: 100%;
		box-sizing: border-box;
		box-shadow: 0rpx 7rpx 19rpx 0rpx rgba(0, 0, 0, 0.1);
		padding: 30rpx 24rpx;
		margin-top: 26rpx;
		display: flex;

		image {
			width: 180rpx;
			height: 140rpx;
			border-radius: 12rpx;
			margin-left: 24rpx;
			flex-shrink: 0;
		}

		.clamp2 {
			font-size: 32rpx;
			color: #3D3D3D;
			line-height: 46rpx;
			/* #ifdef APP-PLUS-NVUE */
			lines: 2;
			/* #endif */
			/* #ifndef APP-PLUS-NVUE */
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			word-break: break-all;
			/* #endif */
		}

		.eye {
			width: 32rpx;
			height: 32rpx;
		}

		.watch {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #999999;
			margin-top: 10rpx;
		}
	}
</style>
<style>
	.scrollContainer {
		max-height: 370px;
		overflow: hidden;
		position: relative;
		/* 开启硬件加速 */
		transform: translateZ(0);
	}

	.scroll-list {
		/* 提前告知浏览器会有transform变化 */
		will-change: transform;
		/* 开启硬件加速 */
		backface-visibility: hidden;
		perspective: 1000px;
	}
</style>